<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body{
                background:#f5f5f5 ;
            }
            #app {
                background: #f5f5f5;
                width: 100%;
            }

            .top{
                width: 100%;
                height: 120px;
                position: fixed;
                margin-bottom: 10px;
                top: 0;
            }
            .top img{
                width: 100%;
            }
            .middle1{
                margin-top: 160px;
                margin-bottom: 55px;
            }
            .footer{
                width: 100%;
                position: fixed;
                bottom: 0;
                height: 50px;
            }
            .footer img{
                width: 100%;
            }
            .middle {
                display: flex;
                align-items: center;
                width: 98%;
                background: white;
                overflow: scroll;
            }
            .d2 {
                width: 200px;
            }

            .d2 li {
                margin-bottom: 5px;
                margin-left: 10px;
                font-size: 12px;
                color: gray;
            }

            li:nth-of-type(1) {
                color: black;
                font-size: 20px;
                margin-bottom: 10px;
                font-weight: bolder;
            }


            .middle img {
                width: 80px;
                height: 110px;
                margin-top: 5px;
                margin-left: 5px;
            }

            button {
                width: 60px;
                height: 40px;
                background: red;
                border-radius: 15px;
                border: none;
                color: white;
            }

        </style>
    </head>
    <body>

        <div id="app">
            <!--将组件渲染到页面上-->
            <mytop></mytop>
            <!--将父组件的参数传给子组件-->
            <mymiddle :movie="movie"></mymiddle>
            <myfooter></myfooter>
        </div>

        <script src="../js/vue.js"></script>
        <script src="../js/axios.min.js"></script>
        <script>

            //顶部组件
            var mytop = {
                template : `<div class="top">
                                <img src="./img/top.png" alt="">
                            </div>`
            }

            //中间组件
            var mymiddle = {
                //接收参数
                props : ["movie"],
                data: function (){
                    return {
                        color: "orange"
                    }
                },
                //渲染
                template : `<div class="middle1">
                                <div class="middle" v-for="i in movie">
                                    <img v-bind:src="i.img" alt="">
                                    <ul class="d2">
                                        <li>{{i.nm}}</li>
                                        <li v-if="i.globalReleased&&i.sc!==0">观众评：<span :style="{color:color}">{{i.mk}}</span>分</li>
                                        <li v-if="!i.globalReleased&&i.sc!==0"><span :style="{color:color}">{{i.wish}}</span>人想看</li>
                                        <li v-if="i.globalReleased&&i.sc===0">暂无评分</li>
                                        <li>{{i.desc}}</li>
                                        <li>{{i.showInfo}}</li>
                                    </ul>
                                    <button :style="{background:i.showStateButton.color}">{{i.showStateButton.content}}</button>
                                </div>
                            </div>`
            }

            //底部组件
            var myfooter = {
                template : `<div class="footer">
                                <img src="./img/foot.png" alt="">
                            </div>`
            }
            //父组件
            var app = new Vue({
                el: "#app",
                data: {
                    movie: [],
                    color: "orange"
                },

                //获取数据可以在 created \ beforeMount \ mounted 钩子函数中
                created() {
                    axios.get("../json/film.json").then(res => {
                        console.log(res.data.data.hot);
                        this.movie = res.data.data.hot;
                    });
                },
                //引入组件
                components : {
                    mytop , mymiddle ,myfooter
                }
            })
        </script>
    </body>
</html>